// 思路：当页面一加载出来，就把本地存储的数据发送给服务器
// 接收的值进行判断，如果，服务器报错，就将错误信息警示框弹出
// 如果没有报错，就说明是正确的将值传递需要修改内容的数据
// 判断是否有昵称，如果有昵称，就用昵称，如果没有昵称，就用用户名
// 将文本部分修改
// 判断头像有没有数据，有数据，就隐藏文本头像，将图片头像的路径修改
// 如果没有数据，就显示文本头像，将图片头像隐藏，文字取用户名下标的第一个字的大写

$(function() {
    //需求1： 获取用户信息，渲染头像
    getUserInfo()
        // 需求2：退出登录
    $('#logout').on('click', function() {
        layer.confirm('确认退出登录吗？', { icon: 3, title: '提示' }, function(index) {
            //do something
            // 如果用户点击确认，就跳转到登录页面
            location.href = '/login.html'
                // 删除token数据
            localStorage.removeItem('token')
            layer.close(index);
        });
    })
});

function getUserInfo() {
    // 发送axios请求：
    axios({
        url: '/my/userinfo',
        // headers: {
        //     Authorization: localStorage.getItem('token')
        // }
    }).then(({ data: res }) => {
        // 判断服务器响应是否正确
        if (res.status != 0) {
            return layui.layer.msg(res.message)
        }
        // 这里可以封装函数直接写，但是封装的话，后期用起来更方便
        renderAvatar(res.data)
    });

}

function renderAvatar(user) {
    // 找真，第一个为真，就用第一个
    let name = user.nickname || user.username
    $('#welcome').html(`欢迎${name}`)
    if (user.user_pic != null) {
        $('.text-avatar').hide()
        $('.layui-nav-img').show().attr('src', user.user_pic)
    } else {
        let first = name[0].toUpperCase()
        $('.text-avatar').show().html(first)
        $('.layui-nav-img').hide()
    }
}